<template>
  <div class="comment_container">
    <div class="input_container">
      <div class="info_search">
        <div class="count">{{ data.total || 0 }}个评论</div>
            <div class="search">
                <ElButton
                  v-for="item in searchType"
                  :key="item.value"
                  @click.stop="searchKey = item.value"
                  :type="searchKey === item.value ? 'primary' : ''"
                >{{ item.label }}</ElButton>
            </div>
      </div>
      <div class="welcome_to_comment">
        <ElAvatar src="../../../assets/logo.jpeg"></ElAvatar>
        <MyTextarea v-model="commentContent" style="flex:1">
          <el-button type="primary" round @click="handleAddComment" style="padding: 0 30px"
          >发布</el-button>
        </MyTextarea>
      </div>             
    </div>
    <div
      v-for="item in commentList"
      :key="item.id"
      class="comment_list_container mb-3 cursor-pointer"
    >
      <div class="flex gap-3">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <div class="text-sm font-semibold">
          <div>{{ item.createdName }}</div>
        </div>
        <div class="text-xs"></div>
        <div>vip</div>
        {{ dayjs(item.createdTime).format('YYYY-MM-DD HH:MM:ss') }}
      </div>
      <div class="mt-2">
        {{ item.description }}
      </div>
      <!-- 评论 -->
      <div v-if="!!item.taskCommentVO">
        <div>{{ item.taskCommentVO.content }}</div>
      </div>
      <div class="mt-4 flex items-center gap-8">
        <div
          class="flex items-stretch gap-0.5 cursor-pointer text-sm"
          hover:text-gray-400
          v-for="handle in handleList"
          :key="handle.icon"
          @click.stop="handleClick(handle.type, item.id!)"
        >
          <div
            v-if="handle.checkedFieldName&&item[handle.checkedFieldName]"
            :class="handle.checkedIcon"
            :style="{ color: '#409eff' }"
          ></div>
          <div v-else :class="handle.icon"></div>
          <div>{{ item[handle.fieldName] || 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import MyTextarea from '@/components/MyTextarea/index.vue'
const props = withDefaults(
  defineProps<{
   data:{
    list:Array<any>,
    total:number
   },
   taskId:number|string
    pagination: Pagination
  }>(),
  {
    data:()=>({list:[],total:0}),
    taskId:0,
    pagination: () => ({ pageSize: 10, pageNum: 1 ,total:0}),
  },
)

const $emit = defineEmits(['refresh'])

const handleList = ref([
  {
    icon: 'i-carbon-thumbs-up',
    checkedIcon: 'i-carbon-thumbs-up-filled',
    type: 'liked',
    fieldName: 'likedNum',
    checkedFieldName: 'isLiked',
  },
  {
    icon: 'i-carbon-ibm-watson-assistant',
    type: 'comment',
    fieldName: 'commentNum',
  },
])

const commentList: ComputedRef<any[]> = computed(() => {
  return props.data.list
})

const handleClick = async (type: string, id: string | number) => {
  if (type === 'liked') {
    await service.comment.likeComment(id)
    $emit('refresh')
  }
}


const searchKey = ref(0)
const searchType = [
  {
    label: '最热',
    value: 0,
  },
  {
    label: '最新',
    value: 1,
  },
  {
    label: '楼层',
    value: 2,
  },
]

const commentContent = ref({
  content:'',
  images:[]
})
const handleAddComment = async () => {
  const data = {
    taskId: Number(props.taskId),
    content: commentContent.value.content,
  }
  await service.comment.add(data)
}
</script>
<style scoped lang="scss">
.comment_container{
  .input_container {
      .info_search {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .welcome_to_comment {
        display: flex;
        gap: 20px;
        padding: 10px;
        margin-top: 10px;

        .comment_container {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          border-radius: 5px;
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 10%);

          .comment_input {
            width: 95%;
            height: 80%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 10%);
            border-radius: 5px;

            &:focus-visible {
              outline: none;
            }
          }
        }
      }
    }
}
</style>


